<template>
    <div>
        <el-row :gutter="24">
            <el-col :md="3" :sm="4">{{ $t('channel name') }}</el-col>
            <el-col :md="3" :sm="4">{{ $t('Rotate') }}</el-col>
            <el-col :md="3" :sm="4">{{ $t('left crop') }}</el-col>
            <el-col :md="3" :sm="4">{{ $t('right crop') }}</el-col>
            <el-col :md="3" :sm="4">{{ $t('top crop') }}</el-col>
            <el-col :md="3" :sm="4">{{ $t('bottom crop') }}</el-col>
            <el-col :md="3" :sm="4">{{ $t('full framerate deinterlace') }}</el-col>
            <el-col :md="3" :sm="4">{{ $t('NTSC Compatible') }}</el-col>
        </el-row>
        <div v-for="(data, index) in dataList">
            <el-divider></el-divider>
            <el-row :gutter="24" style="margin-top:16px">
                <el-col :md="3" :sm="4">
                    <el-input v-model="data.name" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="3" :sm="4">
                    <el-select v-model="data.cap.rotate" :placeholder="$t('select_placeholder')" style="width: 100%;">
                        <el-option label="0" :value="0"></el-option>
                        <el-option label="90" :value="90"></el-option>
                        <el-option label="180" :value="180"></el-option>
                        <el-option label="270" :value="270"></el-option>
                    </el-select>
                </el-col>
                <el-col :md="3" :sm="4">
                    <el-input v-model="data.cap.crop.L" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="3" :sm="4">
                    <el-input v-model="data.cap.crop.R" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="3" :sm="4">
                    <el-input v-model="data.cap.crop.T" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="3" :sm="4">
                    <el-input v-model="data.cap.crop.B" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="3" :sm="4">
                    <el-switch v-if="index < 2" v-model="data.cap.deinterlace" inline-prompt active-text="ON"
                        inactive-text="OFF"></el-switch>
                </el-col>
                <el-col :md="3" :sm="4">
                    <el-switch v-if="index < 2" v-model="data.cap.ntsc" inline-prompt active-text="ON"
                        inactive-text="OFF"></el-switch>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
  
<script setup name="video-stream">
const props = defineProps(['data'])
let dataList = ref([])

watchEffect(() => {
    dataList.value = props.data
})

onUnmounted(() => {

});

</script>
  
<style scoped lang="scss">
.encode-setting {}
</style>
  
  